import { sceneOption as opts } from "../state/index";

export class Mask {

  constructor() {
    // 蒙版包含器
    let mask = document.createElement("div");
    mask.style.position = "absolute";
    mask.style.left = "0";
    mask.style.top = "0";
    mask.style.height = "100%";
    mask.style.width = "100%";
    mask.style.zIndex = "10";
    mask.style.textAlign = "center";
    mask.style.color = "#fff";
    mask.style.backgroundColor = "rgba(0, 0, 0, .9)";

    // 添加提示文字
    let h1 = document.createElement("h2");
    h1.style.marginTop = "150px";
    h1.style.cursor = "pointer";
    h1.innerText = "点击开始";
    let h5 = document.createElement("h5");
    h5.innerText = "W,A,S,D = Move, SPACE = Jump, MOUSE = Look, CLICK = Shoot";
    mask.appendChild(h1);
    mask.appendChild(h5);

    // h1添加时间
    h1.onclick = function(){
      opts.mask.style.display = "none";
      opts.dom.requestPointerLock();
    }

    opts.mask = mask;
    document.body.append(opts.mask);
  }
}
